<template>
    <div class="article">
        <h1>
            {{info.title}}
        </h1>
        <div class="dir">
            <span>
                <i>{{info.add_time}}</i>{{info.author}}
            </span>
            <i>{{config.title}}</i>
        </div>
        <div class="dir dir-s">
            <span><i>浏览量：{{info.count}}</i><i>转发量：{{info.share}}</i></span>
        </div>
        <section class="detail" v-html="info.content">
            
        </section>
        <section class="sec-button">
            <button class="vp-btn-blue" @click="share">
                分享给好友/朋友圈+{{info.integral}}积分
            </button>
        </section>
        <div class="mb">
            <div class="back_blue">
                <img class="close" src="~assets/img/car/close.png" alt="">
                <div>
                    <img src="~assets/img/car/star_blue.png" alt="">
                    <p>积分+{{info.integral}}</p>
                </div>
                <button class="vp-btn-blue" @click="locationHref('/sign/mycount')">
                    查看我的积分
                </button>
            </div>
        </div>
    </div>
</template>

<script>
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    import wx from 'weixin-js-sdk';
    import $ from 'jquery';
    export default {
        name:'article',

        data() {
            return {
                info:{},
                config: {}
            }
        },

        methods: {
            share() {
                let _this = this;
                this.$toast('请点击右上角分享');
            }
        },

        components:{
            
        },

        mounted() {
            $('.mb').click(e => {
                $('.mb').fadeOut();
            });
            $('.close').click(e => {
                $('.mb').fadeOut();
            });
            $('.back_blue').click(e => {
                e.stopPropagation();
            });

            this.axios.get('article_info', {params: {id: this.$route.query.id}}).then(data => {
                if (data.status == 200) {
                    this.info = data.data;
                    $("title").html(data.data.title);
                } else {
                    this.$toast('服务器处理异常，请稍后再试');
                }
            })

            // 增加浏览量
            this.axios.get('add_count',{params: {id: this.$route.query.id}}).then(data => {
                
            })

            this.axios.get('integral_config').then(data => {
                if (data.status == 200) {
                    this.config = data.data;
                } else {
                    this.$toast('服务器处理异常，请稍后再试');
                }
            })

            
            let _this = this;
            this.axios.get('js?url=' + window.location.href).then(resultData => {
                wx.config(resultData);
                setTimeout(function() {
                    wx.ready(function () {
                        let config = {
                            title: _this.info.title, // 分享标题
                            desc: _this.info.info, //分享描述
                            link: window.location.href, // 分享链接
                            imgUrl: _this.info.img, // 分享图标
                            success: function () {
                                // 用户确认分享后执行的回调函数
                                // 增加浏览量
                                _this.axios.get('add_share',{params: {id: _this.$route.query.id}}).then(data => {
                                    console.log(data);
                                })

                                _this.axios.get('get_integral', { params: {id: localStorage.id, aid: _this.$route.query.id} }).then(data => {
                                    console.log(data);
                                    $('.mb').fadeIn();
                                })
                            },
                            cancel: function () {
                                // 用户取消分享后执行的回调函数
                                alert('您取消了分享，宝宝不开心~');
                            }
                        };
                        wx.onMenuShareTimeline(config);
                        wx.onMenuShareAppMessage(config);
                        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后
                        // ，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
                        // 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，
                        // 则可以直接调用，不需要放在ready函数中。
                    });
                }, 500);
            }).catch(err => {
                console.log(err);
            });
        },

        destroyed() {
            $("title").html('湖南德熙进口大众');
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../../plugins/assets/css/flex.less';
    @import '../../../assets/css/car.less';
    .article {
        padding:.4rem;
        .box-sizing;
        h1 {
            font-size: .48rem;
            font-weight: bold;
            line-height: 1.2;
            margin-bottom: .5rem;
        }
        .dir {
            font-size: .3rem;
            margin-bottom: .3rem;
            > span {
                color: #B0B0B0;
                margin-right: .7rem;
                i {
                    margin-right: .2rem;
                }
            }
            > i {
                color: @blue;
            }
        }
        .dir-s {
            span {
                color: #3c3c3c;
            }
        }
        .detail {
            max-height: 70vh;
            padding-bottom: 1.05rem;
            overflow: auto;
            font-size: .28rem;
            img {
                max-width: 100%;
            }
            p,div {
                font-size: .28rem;
            }
        }
        .sec-button {
            position: fixed;
            bottom: 0;
            width: 100%;
            .box-sizing;
            left: 0;
            background: #fff;
            padding: .15rem .33rem;
            font-size: .32rem;
            .vp-btn-blue {
                width: 100%;
                background: #1E74DE;
                color: #fff;
                height: .75rem;
                font-size: .32rem;
                .bor(5px);
            }
        }
        .mb {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.5);
            z-index: 5;
            display: none;
            .back_blue {
                position: absolute;
                left:50%;
                top: 30%;
                width: 80%;
                background: #fff;
                color: @blue;
                padding: .4rem;
                .bor(5px);
                .box-sizing;
                .translate(-50%,0);
                font-size: .28rem;
                h2 {
                    font-size: .32rem;
                    text-align: center;
                    margin-bottom: .5rem;
                }
                > img {
                    position: absolute;
                    right: .4rem;
                    top: .4rem;
                }
                > div {
                    text-align: center;
                    margin: .3rem 0;
                    img {
                        width: .8rem;
                    }
                    p {
                        font-size: .32rem;
                        margin:.3rem 0;
                    }
                }
                .vp-btn-blue {
                    width: 100%;
                    background: #1E74DE;
                    color: #fff;
                    height: .75rem;
                    font-size: .32rem;
                    .bor(5px);
                }
            }
        }
    }
</style>